<template>
    <div class="queryDetail">
        <scroll ref="scroll" class="scroll-content">
            <div class="scroll-warpper">
                <!-- 顶部流程图 -->
                <div class="flow-box">
                    <flow :flowInfo="flowInfo" :currentFlow="order.order_state"></flow>
                </div>
                <!-- 订单信息 -->
                <div class="frame-box">
                    <div class="title">订单信息</div>
                    <div class="order-con">
                        <div class="item">
                            <div class="item-title">订单编号：</div>
                            <div class="item-text">{{order.order_code}}</div>
                        </div>
                        <div class="item">
                            <div class="item-title">下单时间：</div>
                            <div class="item-text">{{order.order_createtime|formatDate}}</div>
                        </div>
                        <div class="item">
                            <div class="item-title">回收方式：</div>
                            <div class="item-text" v-if="order.order_way == 1">邮寄回收</div>
                        </div>
                        <div class="item">
                            <div class="item-title">预估价格：</div>
                            <div class="item-text">
                                <span>￥{{order.price}}</span>
                                <span class="note"> (用户最初估价)</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-title">成交价格：</div>
                            <div class="item-text"> 
                                <span class="red">
                                    <template v-if="order.price_fac">￥{{order.price_fac}}</template>
                                    <template v-else>等待工程师检测</template>
                                </span>
                                <span class="note"> (手服网工程师依据实物检测得出)</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 用户信息 -->
                <div class="frame-box">
                    <div class="title">用户信息</div>
                    <div class="order-con">
                        <div class="item">
                            <div class="item-title">用户姓名：</div>
                            <div class="item-text">{{order.user.name}}</div>
                        </div>
                        <div class="item">
                            <div class="item-title">联系电话：</div>
                            <div class="item-text">{{order.user.tel}}</div>
                        </div>
                        <div class="item">
                            <div class="item-title">详细地址：</div>
                            <div class="item-text">{{order.user.shengCityArea}}{{order.user.address}}</div>
                        </div>
                        <div class="item">
                            <div class="item-title">支付宝：</div>
                            <div class="item-text">
                                <span class="">{{order.user.alipay}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 手机信息 -->
                <div class="frame-box">
                    <div class="title">手机信息</div>
                    <div class="phone-con">
                        <div class="con-left">
                            <img :src="order.phone.img" width="60" height="60">
                        </div>
                        <div class="con-right">
                            <div class="con-title">{{order.phone.brand}} {{order.phone.model}}</div>
                            <div class="look" @click.prevent.stop="phoneShow=!phoneShow">查看详情</div>
                            <div class="con-desc">
                                <!-- 用户数据 -->
                                <div class="desc">
                                    <div class="desc-title">用户提交：</div>
                                    <template v-for="item in order.single">
                                        {{item.title}}，
                                    </template>
                                </div>
                                <!-- 工程师检测 -->
                                <div class="desc" v-if="order.single_fac">
                                    <div class="desc-title">工厂检测：</div>
                                    <template v-for="item in order.single">
                                        {{item.title}}，
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 邮寄信息 -->
                <div class="frame-box">
                    <div class="title">邮寄信息</div>
                    <div class="order-con">
                        <router-link :to="'/hsqlogin/hsqcenter/hsqdetail/mail?order_code='+order_code" class="fill-mail">
                            <template v-if="!order.mailinfo">现在填写</template>
                            <template v-if="order.mailinfo && order.order_state==2">修改</template>
                        </router-link>
                        <div class="item">
                            <div class="item-title">邮寄公司：</div>
                            <div class="item-text">
                                <template v-if="order.mailinfo">{{order.mailinfo.come_company}}</template>
                                <template v-else>暂未填写</template>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-title">邮寄编号：</div>
                            <div class="item-text">
                                <template v-if="order.mailinfo">{{order.mailinfo.come_code}}</template>
                                <template v-else>暂未填写</template>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 邮寄相关 -->
                <div class="frame-box">
                    <div class="title">邮寄相关<span class="note">请优先选择顺丰到付（0元免邮费）！</span></div>
                    <div class="order-con">
                        <div class="item">
                            <div class="item-title">收件公司：</div>
                            <div class="item-text">深圳手服网信息科技有限公司</div>
                        </div>
                        <div class="item">
                            <div class="item-title">收件人：</div>
                            <div class="item-text"> 回收业务部</div>
                        </div>
                        <div class="item">
                            <div class="item-title">联系电话：</div>
                            <div class="item-text">0755-8888888</div>
                        </div>
                        <div class="item">
                            <div class="item-title">收件地址：</div>
                            <div class="item-text">深圳市光明新区公明街道玉律玉泉东路18-1号美景高新科技园8栋3楼</div>
                        </div>
                    </div>
                </div>
            </div>
        </scroll>
        <!-- 弹出手机信息 -->
        <template class="modal-phone" v-if="phoneShow">
            <modal @closeModal="closePhoneModal">
                <div class="phone-box">
                    <div class="phone">
                        <div class="title">用户提交手机信息</div>
                        <ul>
                            <li class="item" v-for="item in order.single">
                                <div class="item-text">{{item.title}}</div>
                            </li>
                            <li class="item" v-for="item in order.double">
                                <div class="item-text">{{item.title}}</div>
                            </li>
                        </ul>
                    </div>
                    <div class="phone" v-if="order.single_fac">
                        <div class="title">工程师检测手机信息</div>
                        <ul>
                            <li class="item" v-for="item in order.single">
                                <div class="item-text">{{item.title}}</div>
                            </li>
                            <li class="item" v-for="item in order.double">
                                <div class="item-text">{{item.title}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </modal>
        </template>

        <!-- 自路由入口 -->
        <template name="fade">
            <router-view></router-view>
        </template>
    </div>
</template>

<script>
import Scroll from '../../base/scroll/scroll.vue'           //缓动框架
import Flow from '../parts/flow.vue'                        //顶部流程
import Modal from '../parts/modal.vue'                        //顶部流程

export default {
    data() {
        return {
            order_code: this.$route.query.order_code,   //订单编号
            order: {},          //当前订单信息
            flowInfo: [],       //流程步骤信息
            phoneShow: false,    //弹出手机信息
        }
    },
    props: {},
    components: {Scroll, Flow, Modal},
    created() {
        //获取本地存储的订单
        this.getOrderInfo(this.order_code)
        //获取流程步骤信息
        this.getFlowInfo()
    },
    methods: {
        //获取本地存储的订单
        getOrderInfo(id) {
            var str = localStorage.getItem('hs_order')
            var strObj = JSON.parse(str)
            strObj.forEach(item => {
                if(item.order_code == id) {
                    this.order = item
                }
            })
            // console.log(this.order)
        },
        //获取流程步骤信息
        async getFlowInfo() {
            var result = await this.$ajax('/flow')
            if(result.status == 200) {
                this.flowInfo = result.data
            }
            // console.log(this.flowInfo)
        },
        //关闭手机信息模态框
        closePhoneModal(){
            this.phoneShow = false;
        }
    },
    watch: {
        //监视路由变化，刷新原始数据
        '$route' (to, from) {
            if(from.path=="/hsqlogin/hsqcenter/hsqdetail/mail"){
                //重新获取本地存储的订单
                this.getOrderInfo(this.order_code)
            }
        }
    }
}
</script>
<style  lang="less" scoped>
@import "../../common/less/variable.less";
.scroll-content{
    position:fixed;
    left:0;
    top:0px;
    bottom:0;
    width:100%;
    overflow:hidden;
    background:@color-gray-bg;
    z-index:92;
    .scroll-warpper{
        // 步骤
        .flow-box{
            width:100%;
            padding:15px 10px;
            background:@color-yellow;
            box-sizing:border-box;
            margin-bottom:10px;
        }
        // 框架
        .frame-box{
            padding:15px 10px;
            background:#fff;
            margin-bottom:10px;
            .title{
                font-size:14px;
                color:@color-alert-title;
                margin-bottom:15px;
                .note{
                    font-size:10px;
                    color:@color-red;
                    margin-left:15px;
                }
            }
            //订单信息
            .order-con{
                font-size:14px;
                position:relative;
                .fill-mail{
                    //邮寄信息
                    position:absolute;
                    top:0;
                    right:0;
                    color:@color-blue;
                }
                .item{
                    display:flex;
                    margin-bottom:15px;
                    .item-title{
                        flex:0 0 70px;
                        color:@color-alert-con;
                    }
                    .item-text{
                        flex:1;
                        // overflow:hidden;
                        color:@color-alert-title;
                        .red{
                            color:@color-red;
                        }
                        .note{
                            color:@color-alert-con;
                            font-size:10px; 
                        }
                    }
                    &:last-child{
                        margin-bottom:0;
                    }
                }
            }
            // 手机信息
            .phone-con{
                display:flex;
                .con-left{
                    flex:0 0 65px;
                }
                .con-right{
                    flex:1;
                    margin-left:5px;
                    font-size:14px;
                    position:relative;
                    overflow:hidden;
                    .con-title{
                        font-size:14px;
                        color:@color-alert-title;
                        line-height:16px;
                    }
                    .look{
                        position:absolute;
                        top:0;
                        right:0;
                        color:@color-blue;
                        line-height:16px;
                    }
                    .con-desc{
                        .desc{
                            margin-top:7px;
                            color:@color-alert-con;
                            width:90%;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                            font-size:12px;
                            line-height:16px;
                            .desc-title{
                                display:inline-block;
                                font-size:14px;
                            }
                                
                        }
                    }
                }
            }

        }
    }
    
}
//手机信息的模态框
.phone-box{
    padding:10px;
    box-sizing:border-box;
    .phone{
        .title{
            text-align:center;
            font-size:16px;
            color:@color-alert-title;
            margin:10px 0;
        }
        ul{
            overflow:hidden;
            .item{
                width:33.33%;
                float:left;
                overflow:hidden;
                display:table;
                padding:2px;
                box-sizing:border-box;
                .item-text{
                    display:table-cell;
                    padding:5px;
                    height:20px;
                    font-size:10px;
                    color:@color-alert-title;
                    text-align:center;
                    vertical-align:middle;
                    background:@color-yellow;
                    border-radius:@border-alert-radius;
                }
            }
        }
    }
}

</style>
